<!--
 * @Descripttion: 
 * @Version: 
 * @Author: gaohj
 * @Date: 2022-11-10 10:58:31
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-11-10 11:25:41
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="test" class="kangbazi">
        hello
        <!-- 这是注释 -->
        <p>test</p>
    </div>


    <script>
        //每个节点都有自己的属性 
        // 元素节点
        // 属性节点 
        // 文本节点 
        // 注释节点  

        // nodeType(节点类型)
        // 元素节点: 1
        // 属性节点: 2
        // 文本节点: 3
        // 注释节点: 8 


        // nodeName(节点的名称)
        // 元素节点  <p></p>  => p
        // 属性节点  属性的名字 class="kangbazi"  => class
        // 文本节点  #text 
        // 注释节点 #comment

        // nodeValue(节点的值 )
        // 元素节点  null
        // 属性节点  属性的值 class="kangbazi"  => kangbazi
        // 文本节点  文本本身  包含空格和换行
        // 注释节点  注释内容  包含空格和换行 



        var divEle = document.getElementById('test');
        // 属性节点 
        var ele = divEle.attributes[1];
        // console.log(ele)
        //文本节点
        var text = divEle.childNodes[0];
        // console.log(text,text.length);
        //注释节点
        var comment = divEle.childNodes[1];

        // 元素节点 
        var childele = divEle.childNodes[3];

        // console.log('元素节点:',childele.nodeType);
        // console.log('文本节点:',text.nodeType);
        // console.log('属性节点:',ele.nodeType);
        // console.log('注释节点:',comment.nodeType);



        
        // console.log('元素节点:',childele.nodeName);
        // console.log('属性节点:',ele.nodeName);
        // console.log('文本节点:',text.nodeName);
        // console.log('注释节点:',comment.nodeName);


        // console.log('元素节点:',childele.nodeValue);
        // console.log('属性节点:',ele.nodeValue);
        // console.log('文本节点:',text.nodeValue);
        // console.log('注释节点:',comment.nodeValue);
        

        //后期可以获取节点的属性  并且进行判断用  

        // 对子节点进行遍历 只留下文本节点  


    </script>
</body>
</html>